<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>管理员管理</span>
      </div>
      <div>
        <el-row>
          <el-input
            style="width: 300px"
            :prop="queryinfo.idorname"
            v-model="queryinfo.idorname"
            placeholder="请输入内容"
          ></el-input>
          <el-button type="primary" class="sou" @click="getadminlist"
            >搜索</el-button
          >
        </el-row>
      </div>
    </el-card>
    <el-button type="primary" @click="dialogFormVisible = true" class="button"
      >添加</el-button
    >
    <el-button type="danger" @click="admindel" class="button"
      >批量删除</el-button
    >
    <el-table
      border
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="ooo"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="ID" width="120" prop="admin_id">
      </el-table-column>
      <el-table-column prop="admin_name" label="姓名" width="120">
      </el-table-column>
      <!-- <el-table-column prop="email" label="邮箱"> </el-table-column> -->
      <el-table-column prop="role" label="角色">
      <template slot-scope="scope">
         <div>{{scope.row.role==1?'经管负责人':'部门负责人'}}</div>                                             
      </template>
       </el-table-column>
      <el-table-column prop="mobile" label="手机号"> </el-table-column>
      <el-table-column label="是否启用" prop="is_use" width="120">
        <template v-slot:default="scope">
          <el-switch
            :value="scope.row.is_use == 1 ? true : false"
            @change="changeadminstatus(scope.row)"
            active-color="#13ce66"
            inactive-color="#ff4949"
          ></el-switch>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
          type="primary"
            size="mini"
            @click="handleEdit(scope.row,scope.row.admin_id), (dialogFormVisible1 = true)"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.admin_id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加开始 -->
    <el-dialog title="添加管理员" :visible.sync="dialogFormVisible" width="90%">
      <el-form :model="additmeform" :rules="rules" ref="itemform">
        <div class="add">
          <el-form-item
            label="管理员名称"
            :label-width="formLabelWidth"
            prop="admin_name"
          >
            <el-input
              v-model="additmeform.admin_name"
              autocomplete="off"
              placeholder="请输入管理员名称"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item label="邮箱" :label-width="formLabelWidth" prop="email">
            <el-input
              v-model="additmeform.email"
              autocomplete="off"
              placeholder="请输入邮箱"
            ></el-input>
          </el-form-item> -->
          <el-form-item
            label="手机号"
            :label-width="formLabelWidth"
            prop="mobile"
          >
            <el-input
              v-model="additmeform.mobile"
              autocomplete="off"
              placeholder="请输入手机号"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="是否禁用管理员"
            :label-width="formLabelWidth"
            prop="is_use"
          >
            <el-switch
              v-model="additmeform.is_use"
              @change="changeitemformStatus"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </el-form-item>
          <el-form-item label="密码" :label-width="formLabelWidth" prop="pwd">
            <el-input v-model="additmeform.pwd" autocomplete="off"></el-input>
          </el-form-item>
          <!-- <el-form-item
            label="确认密码"
            :label-width="formLabelWidth"
            prop="repwd"
          >
            <el-input v-model="additmeform.repwd" autocomplete="off"></el-input>
          </el-form-item> -->
          <el-form-item
            label="真实姓名"
            :label-width="formLabelWidth"
            prop="real_name"
          >
            <el-input
              v-model="additmeform.real_name"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="角色" :label-width="formLabelWidth" prop="role">
            <!-- <el-input
              v-model="additmeform.role"
              autocomplete="off"
              placeholder="请输入邮箱"
            ></el-input> -->
            <el-radio v-model="additmeform.role" label="1">经管负责人</el-radio>
            <el-radio v-model="additmeform.role" label="2">部门负责人</el-radio>
          </el-form-item>
          <!-- <el-form-item                                 
            label="微信号"
            :label-width="formLabelWidth"
            prop="wechat"
          >
            <el-input
              v-model="additmeform.wechat"
              autocomplete="off"
            ></el-input>
          </el-form-item> -->
          <!-- <el-form-item label="QQ号" :label-width="formLabelWidth" prop="qq">
            <el-input v-model="additmeform.qq" autocomplete="off"></el-input>
          </el-form-item> -->
          <el-form-item
            label="备注"
            :label-width="formLabelWidth"
            prop="remarks"
          >
            <el-input
              v-model="additmeform.remarks"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </div>
      </el-form>
      <template>
        <span class="dialog-footer">
          <el-button @click="cancelform('itemform')">取 消</el-button>
          <el-button type="primary" @click="submititemform('itemform')"
            >确 定</el-button
          >
        </span>
      </template>
    </el-dialog>
    <!-- 添加结束 -->
    <!-- 修改开始 -->
    <el-dialog
      title="修改管理员"
      :visible.sync="dialogFormVisible1"
      width="90%"
    >
      <el-form :model="additmeform" :rules="rules" ref="itemform">
        <div class="add">
          <el-form-item
            label="管理员名称"
            :label-width="formLabelWidth"
            prop="admin_name"
          >
            <el-input
              v-model="additmeform.admin_name"
              autocomplete="off"
              placeholder="请输入管理员名称"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item label="邮箱" :label-width="formLabelWidth" prop="email">
            <el-input
              v-model="additmeform.email"
              autocomplete="off"
              placeholder="请输入邮箱"
            ></el-input>
          </el-form-item> -->
          <el-form-item
            label="手机号"
            :label-width="formLabelWidth"
            prop="mobile"
          >
            <el-input
              v-model="additmeform.mobile"
              autocomplete="off"
              placeholder="请输入手机号"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="是否禁用管理员"
            :label-width="formLabelWidth"
            prop="is_use"
          >
            <el-switch
              v-model="additmeform.is_use"
              @change="changeitemformStatus"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </el-form-item>
          <el-form-item label="密码" :label-width="formLabelWidth" prop="pwd">
            <el-input v-model="additmeform.pwd" autocomplete="off"></el-input>
          </el-form-item>
          <!-- <el-form-item
            label="确认密码"
            :label-width="formLabelWidth"
            prop="repwd"
          >
            <el-input v-model="additmeform.repwd" autocomplete="off"></el-input>
          </el-form-item> -->
          <el-form-item
            label="真实姓名"
            :label-width="formLabelWidth"
            prop="real_name"
          >
            <el-input
              v-model="additmeform.real_name"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item
            label="微信号"
            :label-width="formLabelWidth"
            prop="wechat"
          >
            <el-input
              v-model="additmeform.wechat"
              autocomplete="off"
            ></el-input>
          </el-form-item> -->
          <!-- <el-form-item label="QQ号" :label-width="formLabelWidth" prop="qq">
            <el-input v-model="additmeform.qq" autocomplete="off"></el-input>
          </el-form-item> -->
          <el-form-item
            label="备注"
            :label-width="formLabelWidth"
            prop="remarks"
          >
            <el-input
              v-model="additmeform.remarks"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </div>
      </el-form>
      <template>
        <span class="dialog-footer">
          <el-button @click="cancelform('itemform')">取 消</el-button>
          <el-button type="primary" @click="int('itemform')">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 分页开始 -->
    <el-pagination
      v-if="this.tableData.length > 0"
      style="margin-left: 20%; margin-top: 30px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryinfo.page"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="queryinfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <!-- 分页结束 -->
  </div>
</template>

<script>
import http from "../utils/http";
import cryptoAES from "../utils/crypto AES";
export default {
  name: "VisitAdmin",

  data() {
    // 管理员名称
    var validatename = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("昵称不能为空"));
      }
      let reg = /^[\w\u4e00-\u9fa5]{2,8}$/;
      if (!reg.test(value)) {
        return callback(
          new Error("管理员昵称格式为中文数字字母下划线,长度为2-8位")
        );
      }
    };
    //邮箱正则
    var validateemail = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("邮箱不能为空"));
      }
      let reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
      if (!reg.test(value)) {
        return callback(
          new Error("邮箱格式错误")
        );
      }
    };
    //手机号正则验证
    var validatemobile = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手机号不能为空"));
      }
      let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if (!reg.test(value)) {
        return callback(
          new Error("手机号格式错误")
        );
      }
    };
    // 密码正则验证
    var validatepwd = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.additmeform.repwd !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      // 确认密码正则验证
      var validaterepwd = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.additmeform.pwd) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      //真实姓名正则验证
    var validatereal_name = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("真实姓名不能为空"));
      }
      let reg = /^[\u4e00-\u9fa5]{2,4}$/;
      if (!reg.test(value)) {
        return callback(
          new Error("2-4位中文")
        );
      }
    };
    //微信正则验证
    var validatewechat = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("微信不能为空"));
      }
      let reg = /^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$/;
      if (!reg.test(value)) {
        return callback(
          new Error("微信号可以使用6-20个子母、数字、下划线和减号")
        );
      }
    };
    //qq正则验证
    var validateqq = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("qq不能为空"));
      }
      let reg = /^[1-9][0-9]{4,10}$/;
      if (!reg.test(value)) {
        return callback(
          new Error("qq号不可以0开头,必须是纯数字")
        );
      }
    };
    //备注正则验证
    var validateremarks = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("备注不能为空"));
      }
    };
    return {
      //正则
      rules: {
        admin_name: [{ validator: validatename, trigger: "blur" }],
        email: [{ validator: validateemail, trigger: "blur" }],
        mobile: [{ validator: validatemobile, trigger: "blur" }],
        pwd: [{ validator: validatepwd, trigger: "blur" }],
        repwd: [{ validator: validaterepwd, trigger: "blur" }],
        real_name: [{ validator: validatereal_name, trigger: "blur" }],
        wechat: [{ validator: validatewechat, trigger: "blur" }],
        qq: [{ validator: validateqq, trigger: "blur" }],
        remarks: [{ validator: validateremarks, trigger: "blur" }],
      },
      tableData: [
        {
          role:""
        }
      ],
      input: "",
      multipleSelection: [],
      is_use: true,
      // 分页开始
      total: 0,
      // 页数
      queryinfo: {
        page: 1,
        pageSize: 5,
        idorname: "",
      },
      // 分页结束
      dialogFormVisible: false,
      dialogFormVisible1: false,
      formLabelWidth: "120px",

      additmeform: {
        admin_name: "",
        email: "",
        mobile: "",
        is_use: 1,
        pwd: "",
        repwd: "",
        real_name: "",
        wechat: "",
        qq: "",
        remarks: "",
        role: '1',
      },
      arry:[]
    };
  },

  mounted() {},
  created() {
    this.getadminlist();
  },
  methods: {
    // 编辑管理员
    async int() {
      let res = await http.post("/api/visit/admin/edit?admin_id="+this.e, {
        formdata: this.additmeform,
      });
      console.log(res);
      if (res.code == "00000") {
        this.getadminlist();
        this.dialogFormVisible1 = false;
        this.$message({
          message: "修改成功",
          type: "success",
        });
      } else {
        this.$message({
          message: res.msg,
          type: "warning",
        });
      }
    },
    // 修改管理员
    handleEdit(row,e) {
      this.e = e;
      // 深复制，避免列表对象和弹窗对象的数据同步改动。
      const _row = JSON.parse(JSON.stringify(row));
      this.additmeform= _row 
      this.additmeform.pwd=cryptoAES.decrypt('pwd')
    },
    cancelform(itemform) {
      this.dialogFormVisible = false;
      this.dialogFormVisible1 = false;
      this.$refs[itemform].resetFields();
    },

    // 分页
    handleSizeChange(val) {
      this.queryinfo.pageSize = val;
      this.getadminlist();
    },
    handleCurrentChange(val) {
      this.queryinfo.page = val;
      this.getadminlist();
    },


    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    ooo(val) {
      this.arry = val
      // this.multipleSelection = val;
    },
    changeitemformStatus(status) {

      this.additmeform.is_use = status;
    },
    // 是否禁用管理员
    async changeadminstatus(row) {

      row.is_use = !row.is_use;
      let res = await http.post(
        "/api/visit/admin/changestatus?admin_id=" + row.admin_id,
        { is_use: row.is_use }
      );

      if (res.code != "00000") {
        return this.$message.error("更新状态失败");
      }
      this.$message.success("更新状态成功");
      this.getadminlist();
    },
    // 获取列表数据
    async getadminlist() {
      let res = await http.get("/api/visit/admin/list", this.queryinfo);
      if (res.code == "00000") {
        this.tableData = res.data;
        this.total = res.total;
      }
    },
    // 单条删除
    async handleDelete(admin_id) {
      const result = await this.$confirm(
        "此操作将永久删除该记录, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((error) => {
        return error;
      });
      //点击确定是confirm
      if (result == "confirm") {
        let res = await http.get("/api/visit/admin/del?admin_id=" + admin_id);

        if (res.code != "00000") {
          return this.$message.error("数据库异常！删除失败");
        }
        this.$message.success("删除成功");
        this.getadminlist();
      }
      //点击取消cancel
      if (result == "cancel") {
        this.$message.info("已取消删除");
      }
    },

    // 多条删除
    async admindel() {
      let id = this.arry.map((item) => item.admin_id)

      const result = await this.$confirm(
        "此操作将永久删除该记录, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((error) => {
        return error;
      });

      //点击确定是confirm
      if (result == "confirm") {
        let res = await http.get("/api/visit/admin/del" ,{admin_id:id});

        if (res.code != "00000") {
          return this.$message.error("数据库异常！删除失败");
        }
        this.$message.success("删除成功");
        this.getadminlist();
      }
    },
    // 添加管理员
    async submititemform(itemform) {
      let res = await http.post("/api/visit/admin/add", {
        admin_name: this.additmeform.admin_name,
        email: this.additmeform.email,
        mobile: this.additmeform.mobile,
        is_use: this.additmeform.is_use,
        pwd: this.additmeform.pwd,
        real_name: this.additmeform.real_name,
        wechat: this.additmeform.wechat,
        qq: this.additmeform.qq,
        remarks: this.additmeform.remarks,
        role:this.additmeform.role
      });

      if (res.code != "00000") {
        return this.$message.error("添加失败");
      }
      this.additmeform = ''
      this.$message.success("添加成功");
      this.dialogFormVisible = false;
      this.getadminlist();
    },
  },
};
</script>

<style lang="less" scoped>
.button {
  margin-top: 20px;
}
.el-table--border {
  margin-top: 20px;
}
.sou {
  margin-left: 10px;
}
</style>